
$(function () {

    time();
    car_char1();
    car_char2();
    car_char3();
    car_char4();
    car_char5();

})

function time() {
    var vWeek, vWeek_s, vDay;
    vWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    var date = new Date();
    vWeek_s = date.getDay();
    // 获取当前日期和时间的各个部分
    var year = date.getFullYear().toString(); // 年份
    var month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份
    var day = date.getDate().toString().padStart(2, '0'); // 日
    var hours = date.getHours().toString().padStart(2, '0'); // 小时
    var minutes = date.getMinutes().toString().padStart(2, '0'); // 分钟
    var seconds = date.getSeconds().toString().padStart(2, '0'); // 秒钟

    // 将日期和时间显示在页面上
    document.getElementById("time").innerHTML = "当前时间  " + year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t" + vWeek[vWeek_s];

};
setInterval("time()", 1000);

var url = 'http://8.138.133.80:5000'
// var url = 'http://127.0.0.1:5000'


function car_char1() {
    $.get(url + '/residentPopulationInEachCity').done(function (data1) {
        var myChart = echarts.init($("#car_char1")[0]);

        let inde = 7;
        let yLabel = data1['city'];
        let yData = data1['number'];
        let yLabel1 = yLabel.slice(0, 7);
        let yData1 = yData.slice(0, 7);
        let bgData = []
        for (let i in yData) {
            bgData.push(2000)
        }
        var option = {
            grid: {
                left: '6%',
                right: '8%',
                bottom: '5%',
                top: '2%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'none'
                },
                formatter: function (params) {
                    return params[0].name + '<br/>' +
                        "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
                        params[0].seriesName + ' : ' + params[0].value + '万人 <br/>'
                }
            },
            xAxis: {
                show: false,
                type: 'value'
            },
            yAxis: [{
                type: 'category',
                inverse: true,
                axisLabel: {
                    show: true,
                    margin: 15,
                    textStyle: {
                        color: '#fff',
                    },
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                data: yLabel1
            }, {
                type: 'category',
                inverse: true,
                axisTick: 'none',
                axisLine: 'none',
                show: true,
                axisLabel: {
                    textStyle: {
                        color: '#9aeced',
                        fontSize: '12'
                    },
                },
                data: yData1
            }],

            series: [{
                name: '人数',
                type: 'bar',
                zlevel: 1,
                itemStyle: {
                    normal: {
                        barBorderRadius: [0, 30, 30, 0],
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: '#52d8da'
                        }, {
                            offset: 1,
                            color: '#57dcde'
                        }]),
                        shadowBlur: 0,
                        shadowColor: 'rgba(87,220,222,0.7)'
                    },
                },
                barWidth: 20,
                data: yData1
            },
            {
                name: '背景',
                type: 'bar',
                barWidth: 20,
                barGap: '-100%',
                data: bgData,
                itemStyle: {
                    normal: {
                        color: 'rgba(24,31,68,1)',
                        barBorderRadius: [0, 30, 30, 0],
                    }
                },
            },
            ]
        };

        myChart.setOption(option);
        window.addEventListener('resize', function () { myChart.resize(); })

        // 定时器，定期更新图表数据
        setInterval(function () {
            if (inde == 21) {
                inde = 0;
            }
            // 更新图表数据
            myChart.setOption({
                yAxis: [{
                    data: yLabel.slice(inde, inde + 7) // 更新yLabel
                }],
                series: [{
                    name: '人数',
                    data: yData.slice(inde, inde + 7) // 仅更新前7条数据
                }]
            });
            inde += 7;
        }, 3000); // 每3秒更新一次数据

    });
}

function car_char2() {
    $.get(url + '/getAQICity').done(function (data1) {
        var myChart = echarts.init($("#car_char2")[0]);

        var data = data1['data'];
        var option = {
            tooltip: {
                show: true,
                trigger: 'item',
                formatter: "{b}: {c}%"
            },
            grid: {
                left: '2%',
                top: '2%',
                bottom: '10%',
                containLabel: true
            },
            series: [{
                type: 'pie',
                selectedMode: 'single',
                radius: ['30%', '70%'],
                color: ['#86D560', '#AF89D6', '#59ADF3', '#FF999A', '#FFCC67'],
                label: {
                    normal: {
                        position: 'inner',
                        formatter: '{c}%',
                        textStyle: {
                            color: '#f2f2f2',
                            fontWeight: 'bold',
                            fontSize: 14
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: data
            }]
        };

        myChart.setOption(option);
        window.addEventListener('resize', function () { myChart.resize(); })
    });
}

function car_char3() {
    $.get(url + '/getGrossDomesticProduct').done(function (data1) {
        var myChart = echarts.init($("#car_char3")[0]);

        var fontColor = '#fff';
        var option = {
            title: {
                text: '各市生产总值',
                top: '3%',
                left: 'center',
                textStyle: {
                    color: '#FFF',
                    align: 'center',
                }
            },
            grid: {
                left: '3%',
                right: '5%',
                top: '15%',
                bottom: '10%',
                containLabel: true
            },
            tooltip: {
                show: true,
                trigger: 'axis'
            },
            legend: {
                show: true,
                x: 'center',
                top: '12%',
                y: '35',
                icon: 'stack',
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    color: '#1bb4f6'
                },
                data: data1['year']
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        color: fontColor
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#397cbc'
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#195384'
                        }
                    },
                    data: data1['city']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '亿元',
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#27b4c2'
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#11366e'
                        }
                    }
                }
            ],
            series: [
                {
                    name: '2015',
                    type: 'line',
                    stack: '总量',
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: {
                        normal: {
                            color: '#0092f6',
                            lineStyle: {
                                color: "#0092f6",
                                width: 1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,146,246,0.9)'
                                }]),
                            }
                        }
                    },
                    markPoint: {
                        itemStyle: {
                            normal: {
                                color: 'red'
                            }
                        }
                    },
                    data: data1['number'][0]
                },
                {
                    name: '2016',
                    type: 'line',
                    stack: '总量',
                    symbol: 'circle',
                    symbolSize: 8,

                    itemStyle: {
                        normal: {
                            color: '#00d4c7',
                            lineStyle: {
                                color: "#00d4c7",
                                width: 1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,212,199,0.9)'
                                }]),
                            }
                        }
                    },
                    data: data1['number'][1]
                },
                {
                    name: '2017',
                    type: 'line',
                    stack: '总量',
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: {
                        normal: {
                            color: '#aecb56',
                            lineStyle: {
                                color: "#aecb56",
                                width: 1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(114,144,89,0.9)'
                                }]),
                            }
                        }
                    },
                    data: data1['number'][2]
                },
                {
                    name: '2018',
                    type: 'line',
                    stack: '总量',
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: {
                        normal: {
                            color: '#3A44FB',
                            lineStyle: {
                                color: "#3A44FB",
                                width: 1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,46,101,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,166,246,0.9)'
                                }]),
                            }
                        }
                    },
                    data: data1['number'][3]
                },
                {
                    name: '2019',
                    type: 'line',
                    stack: '总量',
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: {
                        normal: {
                            color: '#6FE81A',
                            lineStyle: {
                                color: "#6FE81A",
                                width: 1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,212,199,0.9)'
                                }]),
                            }
                        }
                    },
                    data: data1['number'][4]
                },
                {
                    name: '2020',
                    type: 'line',
                    stack: '总量',
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: {
                        normal: {
                            color: '#aecb56',
                            lineStyle: {
                                color: "#aecb56",
                                width: 1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,212,199,0.9)'
                                }]),
                            }
                        }
                    },
                    data: data1['number'][5]
                },
                {
                    name: '2021',
                    type: 'line',
                    stack: '总量',
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: {
                        normal: {
                            color: '#a4feed',
                            lineStyle: {
                                color: "#a4feed",
                                width: 1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,212,199,0.9)'
                                }]),
                            }
                        }
                    },
                    data: data1['number'][6]
                },
                {
                    name: '2022',
                    type: 'line',
                    stack: '总量',
                    symbol: 'circle',

                    symbolSize: 8,
                    itemStyle: {
                        normal: {
                            color: '#707ce9',
                            lineStyle: {
                                color: "#707ce9",
                                width: 1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,212,199,0.9)'
                                }]),
                            }
                        }
                    },
                    data: data1['number'][7]
                }
            ]
        };

        myChart.setOption(option);
        window.addEventListener('resize', function () { myChart.resize(); })
    });
}

function car_char4() {
    $.get(url + '/getSalesRevenueOfCommercialHousing').done(function (data1) {
        var myChart = echarts.init($("#car_char4")[0]);

        // 绘制左侧面
        const CubeLeft = echarts.graphic.extendShape({
            shape: {
                x: 0,
                y: 0
            },
            buildPath: function (ctx, shape) {
                // 会canvas的应该都能看得懂，shape是从custom传入的
                const xAxisPoint = shape.xAxisPoint
                console.log(shape)
                const c0 = [shape.x + 17, shape.y]
                const c1 = [shape.x - 23, shape.y - 6]
                const c2 = [xAxisPoint[0] - 23, xAxisPoint[1] - 13]
                const c3 = [xAxisPoint[0] + 17, xAxisPoint[1]]
                ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
            }
        })
        // 绘制右侧面
        const CubeRight = echarts.graphic.extendShape({
            shape: {
                x: 0,
                y: 0
            },
            buildPath: function (ctx, shape) {
                const xAxisPoint = shape.xAxisPoint
                const c1 = [shape.x + 17, shape.y]
                const c2 = [xAxisPoint[0] + 17, xAxisPoint[1]]
                const c3 = [xAxisPoint[0] + 35, xAxisPoint[1] - 15]
                const c4 = [shape.x + 35, shape.y - 15]
                ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
            }
        })
        // 绘制顶面
        const CubeTop = echarts.graphic.extendShape({
            shape: {
                x: 0,
                y: 0
            },
            buildPath: function (ctx, shape) {
                const c1 = [shape.x + 17, shape.y]
                const c2 = [shape.x + 35, shape.y - 15] //右点
                const c3 = [shape.x - 5, shape.y - 20]
                const c4 = [shape.x - 23, shape.y - 6]
                ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
            }
        })
        // 注册三个面图形
        echarts.graphic.registerShape('CubeLeft', CubeLeft)
        echarts.graphic.registerShape('CubeRight', CubeRight)
        echarts.graphic.registerShape('CubeTop', CubeTop)

        const VALUE = data1['number']

        var option = {
            title: {
                text: '商品房销售额前五城市',
                top: '5%',
                left: 'center',
                textStyle: {
                    color: '#FFF',
                    align: 'center',
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params, ticket, callback) {
                    const item = params[1]
                    return item.name + ' : ' + item.value + '亿元';
                }
            },
            grid: {
                left: '5%',
                right: '5%',
                top: '18%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: data1['city'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'white'
                    }
                },
                axisTick: {
                    show: false,
                    length: 9,
                    alignWithLabel: true,
                    lineStyle: {
                        color: '#7DFFFD'
                    }
                },
                axisLabel: {
                    fontSize: 14
                }
            },
            yAxis: {
                name: '亿元',
                type: 'value',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'white'
                    }
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    fontSize: 12
                },
                boundaryGap: ['20%', '20%']
            },
            series: [{
                type: 'custom',
                renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)])
                    return {
                        type: 'group',
                        children: [{
                            type: 'CubeLeft',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#1BC9F1'
                                },
                                {
                                    offset: 1,
                                    color: '#1C7084'
                                }
                                ])
                            }
                        }, {
                            type: 'CubeRight',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#1C7287'
                                },
                                {
                                    offset: 1,
                                    color: '#1BC3EB'
                                }
                                ])
                            }
                        }, {
                            type: 'CubeTop',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#06728A'
                                },
                                {
                                    offset: 1,
                                    color: '#06728A'
                                }
                                ])
                            }
                        }]
                    }
                },
                data: VALUE
            }, {
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        fontSize: 12,
                        color: '#fff',
                        offset: [2, -25]
                    }
                },
                itemStyle: {
                    color: 'transparent'
                },
                tooltip: {

                },
                data: VALUE
            }]
        }


        myChart.setOption(option);
        window.addEventListener('resize', function () { myChart.resize(); })
    });
}

function car_char5() {
    $.get(url + '/getPerCapitaConsumption').done(function (data1) {
        var myChart = echarts.init($("#car_char5")[0]);

        var option = {
            color: ["#37A2DA", "#32C5E9", "#67E0E3", "#9FE6B8", "#FFDB5C"],
            title: {
                text: '人均消费水平前五城市',
                top: '5%',
                left: 'center',
                textStyle: {
                    color: '#FFF',
                    align: 'center',
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}元"
            },
            legend: {
                x: 'center',
                top: '15%',
                y: '35',
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    color: '#1bb4f6'
                },
                data: data1['city']
            },
            calculable: true,
            series: [
                {
                    name: '人均消费',
                    type: 'funnel',
                    left: '10%',
                    top: '25%',
                    //x2: 80,
                    bottom: '5%',
                    width: '80%',
                    // height: {totalHeight} - y - y2,
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                        normal: {
                            show: true,
                            position: 'inside'
                        },
                        emphasis: {
                            textStyle: {
                                fontSize: 20
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: 'solid'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#fff',
                            borderWidth: 1
                        }
                    },
                    data: data1['data']
                }
            ]
        };

        myChart.setOption(option);
        window.addEventListener('resize', function () { myChart.resize(); })
    });
}